<template>
  <div class="xm-date-picker">
    <el-date-picker
      :type="type"
      :unlink-panels="config.isUrLink"
      :disabled="disabled"
      :disabledDate="disabledDateF"
      v-model="date"
      :placeholder="placeholder"
      :clearable="config.clearable"
      :shortcuts="shortcuts"
      @change="valueChange"
      ref="datePickerRef"
    ></el-date-picker>
  </div>
</template>
<script>
  import { computed, ref } from '@vue/runtime-core'
  import {
    greaterThanToday1Hours,
    getAllTime,
    getDaysTime,
  } from '@/utils/timeTools'
  import moment from 'moment/moment'
  export default {
    name: 'XMDatePicker',
    emits: [
      'update:modelValue',
      'update:startTime',
      'update:endTime',
      'timeChange',
    ],
    props: {
      modelValue: String,
      disabled: Boolean,
      label: String,
      type: {
        type: String,
        default() {
          return 'date'
        },
      },
      disabledDateT: {
        type: String,
        default() {
          return null
        },
      }, // after 屏蔽之后的, before 屏蔽之前的
      foots: String,
      initializeType: {
        type: String,
        default: null,
      },
      config: {
        type: Object,
        default() {
          return { clearable: true, isUrLink: false, shortcuts: false }
        },
      },
    },
    setup(props, context) {
      let date = computed({
        get() {
          // datePickerRef && datePickerRef.value.handleClose()
          return props.modelValue
        },
        set(val) {
          // null 兼容clearable
          console.log('time val = ' + val)
          if (props.initializeType) {
            if (val.length < 2) {
              return
            }
            const startDay = getDaysTime(val[0])
            const endDay = getDaysTime(val[1])
            context.emit('update:modelValue', [startDay, endDay])
            context.emit('update:startTime', startDay)
            context.emit('update:endTime', endDay)
            return
          }
          function initTime(str, isStart = false) {
            if (props.type === 'daterange') {
              return getDaysTime(str) + (isStart ? ' 00:00:00' : ' 23:59:59')
            } else {
              return getAllTime(str)
            }
          }
          context.emit('update:modelValue', val ? val : null)
          context.emit('update:startTime', val ? initTime(val[0], true) : null)
          context.emit('update:endTime', val ? initTime(val[1], false) : null)
        },
      })
      let placeholder =
        '请选择' + props.label ? props.label.replace('：', '') : ''

      const disabledDateF = function (time) {
        if (props.disabledDateT === 'before') {
          return greaterThanToday1Hours(time.getTime())
        } else if (props.disabledDateT === 'after') {
          return !greaterThanToday1Hours(time.getTime())
        }
        return false
      }
      const datePickerRef = ref(null)
      const valueChange = function (val) {
        context.emit('timeChange', val)
      }

      const shortcuts = props.config.shortcuts
        ? [
            {
              text: '今天',
              value: () => {
                const end = moment().format('YYYY-MM-DD') + ' 23:59:59'
                const start = moment().format('YYYY-MM-DD') + ' 00:00:00'
                return [start, end]
              },
            },
            {
              text: '昨天',
              value: () => {
                const time = moment(moment().subtract(1, 'day')).format(
                  'YYYY-MM-DD'
                )
                console.log('time =' + JSON.stringify(time))
                const end = time + ' 23:59:59'

                const start = time + ' 00:00:00'
                return [start, end]
              },
            },
            {
              text: '近7天',
              value: () => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              },
            },
            {
              text: '近30天',
              value: () => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              },
            },
          ]
        : []

      return {
        date,
        placeholder,
        disabledDateF,
        valueChange,
        datePickerRef,
        shortcuts,
      }
    },
  }
</script>
<style lang="scss">
  .xm-date-picker {
    display: inline-block;
    padding: 0 5px;
    .el-input {
      width: 100%;
    }
    .el-form-item__content {
      display: flex;
    }
  }
</style>
